<template>
  <Layout title="编辑备忘" :has-back="true" :has-tabbar="false" ref="layout">
    <view
      style="
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 20rpx;
        display: flex;
        flex-direction: column;
      "
    >
      <view
        style="margin-top: 20rpx; margin-bottom: 20rpx; flex: 1; min-height: 0"
      >
        <Scroll>
          <u-form
            ref="form"
            :model="formData"
            :labelStyle="{ fontSize: '40rpx' }"
          >
            <u-form-item label="提醒日期" label-width="180rpx">
              <view>
                <view style="display: flex; column-gap: 20rpx">
                  <view style="width: 100%">
                    <u-button type="info" @click="datetimeSelect"
                      ><text style="font-size: 40rpx">
                        {{ formData.sendDatetime.split(" ")[0] }}</text
                      ></u-button
                    >
                  </view>
                </view>
                <u-calendar
                  :show="calendar.show"
                  mode="single"
                  @confirm="calendarConfirm"
                  @close="calendarClose"
                  :show-confirm="true"
                  :maxDate="maxDate"
                  :minDate="minDate"
                  :defaultDate="defaultDate"
                  :monthNum="24"
                  :allowSameDay="true"
                ></u-calendar>
              </view>
            </u-form-item>
            <u-form-item label="是否完成" label-width="180rpx">
              <u-radio-group v-model="formData.isComplete">
                <view style="display: flex; column-gap: 20rpx">
                  <u-radio
                    v-for="(radio, index) of completeRadioList"
                    :key="index"
                    :label="radio.label"
                    :name="radio.name"
                    labelSize="40rpx"
                  ></u-radio>
                </view>
              </u-radio-group>
            </u-form-item>
            <view class="top">
              <u-form-item
                label="提醒内容"
                label-position="top"
                label-width="180rpx"
                prop="content"
              >
                <u-textarea
                  v-model="formData.content"
                  height="650rpx"
                  :maxlength="-1"
                ></u-textarea>
              </u-form-item>
            </view>
          </u-form>
        </Scroll>
      </view>
      <view style="display: flex; column-gap: 20rpx">
        <u-button type="error" @click="remove">
          <text style="font-size: 40rpx">删除</text>
        </u-button>
        <u-button type="success" @click="edit">
          <text style="font-size: 40rpx">确定</text>
        </u-button>
      </view>
    </view>
  </Layout>
</template>
<script>
import Layout from "@/pages/component/layout/index.vue";
import Scroll from "@/pages/component/scroll/index.vue";
import { getCurrentDatetime } from "@/api/datetime";
import dayjs from "dayjs";
import {
  showErrorToast,
  showCreateOkToast,
  showCreateErrorToast,
  showEditOkToast,
  showRemoveOkToast,
} from "@/util/message";
import { editNoteByUuid, removeNoteByUuid } from "@/api/note";
import { editOwnerByUuid } from "@/api/owner";
export default {
  components: { Layout, Scroll },
  onLoad(event) {
    this.setRules();
    this.formData = JSON.parse(event.note);
    getCurrentDatetime().then((currentDatetime) => {
      let nowDatetime = dayjs(currentDatetime.data.datetime);
      this.minDate = nowDatetime.subtract(1, "year").format("YYYY-MM-DD");
      this.maxDate = nowDatetime.add(1, "year").format("YYYY-MM-DD");
      this.defaultDate = this.formData.sendDatetime.split(" ")[0];
    });
  },
  methods: {
    setRules() {
      this.$refs.form.setRules({
        content: [
          {
            required: true,
            trigger: ["blur", "change"],
            validator: (rule, value, callback) => {
              if (value.length === 0) {
                return callback(new Error("必填项"));
              }
              if (value.startsWith(" ") || value.endsWith(" ")) {
                return callback(new Error("首尾不能存在不可见字符"));
              }
              return callback();
            },
          },
        ],
      });
    },
    calendarClose() {
      this.calendar.show = false;
    },
    calendarConfirm(event) {
      this.formData.sendDatetime = event[0];
      this.calendarClose();
    },
    datetimeSelect() {
      this.calendar.show = true;
    },
    async remove() {
      let result = await uni.showModal({
        title: "确认提示",
        content: "确认删除备忘信息",
      });
      if (result.confirm && !result.cancel) {
        try {
          await removeNoteByUuid(this.formData);
          await uni.navigateBack({
            delta: 2,
          });
          showRemoveOkToast();
        } catch (error) {
          showErrorToast(error);
        }
      }
    },
    async edit() {
      let result = await uni.showModal({
        title: "确认提示",
        content: "确认修改备忘信息",
      });
      if (result.confirm && !result.cancel) {
        try {
          try {
            await this.$refs.form.validate();
          } catch (error) {
            throw new Error("未填写必填项");
          }
          await editNoteByUuid(this.formData);
          await uni.navigateBack();
          showEditOkToast();
        } catch (error) {
          showErrorToast(error);
        }
      }
    },
  },
  data() {
    return {
      completeRadioList: [
        {
          label: "已完成",
          name: "1",
        },
        {
          label: "未完成",
          name: "2",
        },
      ],
      calendar: {
        show: false,
      },
      formData: {
        userUuid: "",
        sendDatetime: "",
        content: "",
      },
      maxDate: "",
      minDate: "",
      defaultDate: "",
    };
  },
};
</script>
